<template>
  <div class="stats-card" :class="{ [type]: true }">
    <div class="stats-card-header">
      <div class="stats-icon">
        <i :class="iconClass"></i>
      </div>
      <h3 class="stats-title">{{ title }}</h3>
    </div>
    
    <div class="stats-card-body">
      <div class="stats-value">
        {{ formatValue(value) }}
        <span v-if="unit" class="stats-unit">{{ unit }}</span>
      </div>
      
      <div v-if="showTrend && trend !== null" class="stats-trend">
        <span :class="['trend-arrow', trend > 0 ? 'positive' : 'negative']">
          {{ trend > 0 ? '↑' : '↓' }}
        </span>
        <span :class="['trend-value', trend > 0 ? 'positive' : 'negative']">
          {{ Math.abs(trend) }}%
        </span>
        <span class="trend-label">
          {{ trendLabel || (trend > 0 ? '较昨日' : '较昨日') }}
        </span>
      </div>
      
      <div v-if="description" class="stats-description">
        {{ description }}
      </div>
    </div>
    
    <div v-if="showProgress && progress !== null" class="stats-progress">
      <div class="progress-bar-wrapper">
        <div 
          class="progress-bar"
          :style="{ width: `${progress}%` }"
        ></div>
      </div>
      <div class="progress-text">{{ progress }}%</div>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'
import { formatNumber } from '@/utils/formatUtils'

export default {
  name: 'StatsCard',
  props: {
    title: {
      type: String,
      required: true
    },
    value: {
      type: [Number, String],
      required: true
    },
    unit: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'default',
      validator: (value) => {
        return ['default', 'primary', 'success', 'warning', 'danger', 'info'].includes(value)
      }
    },
    icon: {
      type: String,
      default: 'stats'
    },
    trend: {
      type: Number,
      default: null
    },
    trendLabel: {
      type: String,
      default: ''
    },
    description: {
      type: String,
      default: ''
    },
    progress: {
      type: Number,
      default: null
    },
    showTrend: {
      type: Boolean,
      default: true
    },
    showProgress: {
      type: Boolean,
      default: false
    },
    formatOptions: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    // 计算图标类名
    const iconClass = computed(() => {
      const iconMap = {
        stats: 'icon-stats',
        words: 'icon-words',
        time: 'icon-time',
        streak: 'icon-streak',
        efficiency: 'icon-efficiency',
        retention: 'icon-retention',
        progress: 'icon-progress',
        target: 'icon-target',
        calendar: 'icon-calendar',
        clock: 'icon-clock',
        achievement: 'icon-achievement',
        book: 'icon-book'
      }
      return iconMap[props.icon] || 'icon-stats'
    })
    
    // 格式化数值
    const formatValue = (val) => {
      if (typeof val === 'number') {
        return formatNumber(val, {
          decimals: props.formatOptions.decimals || 0,
          thousandsSeparator: props.formatOptions.thousandsSeparator || ',',
          prefix: props.formatOptions.prefix || ''
        })
      }
      return val
    }
    
    return {
      iconClass,
      formatValue
    }
  }
}
</script>

<style scoped>
.stats-card {
  position: relative;
  background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border-left: 4px solid #d9d9d9;
}

.stats-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* 不同类型的卡片 */
.stats-card.default {
  border-left-color: #d9d9d9;
}

.stats-card.primary {
  border-left-color: #1890ff;
}

.stats-card.success {
  border-left-color: #52c41a;
}

.stats-card.warning {
  border-left-color: #faad14;
}

.stats-card.danger {
  border-left-color: #ff4d4f;
}

.stats-card.info {
  border-left-color: #9254de;
}

.stats-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.stats-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  font-size: 20px;
  color: #595959;
  flex-shrink: 0;
}

.stats-card.primary .stats-icon {
  background-color: #e6f7ff;
  color: #1890ff;
}

.stats-card.success .stats-icon {
  background-color: #f6ffed;
  color: #52c41a;
}

.stats-card.warning .stats-icon {
  background-color: #fff7e6;
  color: #faad14;
}

.stats-card.danger .stats-icon {
  background-color: #fff1f0;
  color: #ff4d4f;
}

.stats-card.info .stats-icon {
  background-color: #f9f0ff;
  color: #9254de;
}

.stats-title {
  font-size: 14px;
  font-weight: 500;
  color: #8c8c8c;
  margin: 0;
  flex: 1;
}

.stats-card-body {
  margin-bottom: 16px;
}

.stats-value {
  font-size: 28px;
  font-weight: bold;
  color: #262626;
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.stats-unit {
  font-size: 16px;
  font-weight: normal;
  color: #8c8c8c;
}

.stats-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.trend-arrow {
  font-size: 10px;
}

.trend-arrow.positive {
  color: #52c41a;
}

.trend-arrow.negative {
  color: #ff4d4f;
}

.trend-value {
  font-weight: 500;
}

.trend-value.positive {
  color: #52c41a;
}

.trend-value.negative {
  color: #ff4d4f;
}

.trend-label {
  color: #8c8c8c;
}

.stats-description {
  font-size: 13px;
  color: #8c8c8c;
  line-height: 1.5;
  margin-top: 8px;
}

.stats-progress {
  margin-top: 16px;
}

.progress-bar-wrapper {
  width: 100%;
  height: 6px;
  background-color: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}

.progress-bar {
  height: 100%;
  background-color: #d9d9d9;
  transition: width 0.3s ease;
}

.stats-card.default .progress-bar {
  background-color: #d9d9d9;
}

.stats-card.primary .progress-bar {
  background-color: #1890ff;
}

.stats-card.success .progress-bar {
  background-color: #52c41a;
}

.stats-card.warning .progress-bar {
  background-color: #faad14;
}

.stats-card.danger .progress-bar {
  background-color: #ff4d4f;
}

.stats-card.info .progress-bar {
  background-color: #9254de;
}

.progress-text {
  font-size: 12px;
  color: #8c8c8c;
  text-align: right;
  font-weight: 500;
}

/* 图标样式 */
.icon-stats,
.icon-words,
.icon-time,
.icon-streak,
.icon-efficiency,
.icon-retention,
.icon-progress,
.icon-target,
.icon-calendar,
.icon-clock,
.icon-achievement,
.icon-book {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-stats {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14h-2v-4H8v-2h2V9h2v2h2v2h-2v4zm4-8h-2V7h2v2zm0 4h-2v-2h2v2z"/></svg>');
}

.icon-words {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>');
}

.icon-time {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"/></svg>');
}

.icon-streak {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"/></svg>');
}

.icon-efficiency {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/></svg>');
}

.icon-retention {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M16 1H8C6.34 1 5 2.34 5 4v16c0 1.66 1.34 3 3 3h8c1.66 0 3-1.34 3-3V4c0-1.66-1.34-3-3-3zm-2 20h-4v-1h4v1zm3.25-3H6.75V4h10.5v14z"/></svg>');
}

.icon-progress {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm-2 14l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"/></svg>');
}

.icon-target {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/></svg>');
}

.icon-calendar {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 3h-1V2c0-.55-.45-1-1-1s-1 .45-1 1v1H8V2c0-.55-.45-1-1-1s-1 .45-1 1v1H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/></svg>');
}

.icon-clock {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>');
}

.icon-achievement {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14h-2v-4H8v-2h2V9h2v2h2v2h-2v4zm4-8h-2V7h2v2z"/></svg>');
}

.icon-book {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
}

/* 响应式设计 */
@media (max-width: 768px) {
  .stats-card {
    padding: 16px;
  }
  
  .stats-value {
    font-size: 24px;
  }
  
  .stats-unit {
    font-size: 14px;
  }
  
  .stats-icon {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .stats-card {
    padding: 12px;
  }
  
  .stats-value {
    font-size: 20px;
  }
  
  .stats-title {
    font-size: 12px;
  }
  
  .stats-icon {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
  
  .stats-trend {
    font-size: 11px;
  }
  
  .stats-description {
    font-size: 12px;
  }
}
</style>